<!--
 * @Author: liminghong
 * @Date: 2020-03-04 16:14:58
 * @LastEditTime: 2020-04-09 09:34:51
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \imooc-hybrid-web\src\components\Shopping.vue
 -->
<template>
  <!--
    业务逻辑：
      1、首先在商品详情中点击加入购物车，系统会通过 alert 弹出添加成功的提示，然后页面会跳转到购物车页面。
      2、跳转到购物车页面之后，购物车会展示我们添加的商品。此时在默认状态，商品处于未选中状态。
      3、可以在购物车中，通过+、-按钮来增加或减少购买数量，当商品数目为 1 的时候，不可减少
      4、在加入购物车时，如果该商品已经存在于购物车中，那么该购物车中的商品数量自动+1
      5、购物车中会展示已选的商品价格和已选的商品的总数量，当选中商品或选中的数量发生变化时，总价格和总数量也会发生相应的变化
 -->

  <!--
   从商品详情中进入购物车页面：
      1、首先进入到 main.vue
      2、通过 main.vue 跳转到 购物车 （可以通过传递自定义标记的方式）
      问题：
        当我们从商品详情进入到购物车之后，在返回到商品详情页面，我们会发现无论我们点击那个页面，都会进入最初那个详情页？
      原因：
        虚拟任务栈缓存了商品详情页
      解决方案：
        在跳转到 main 之后，通过自定义指令，来初始化虚拟任务栈
  -->
  <div class="shopping">
    <navigation-bar :pageName="'购物车'" :isShowBack="false"></navigation-bar>
    <div class="shopping-content">
      <div class="shopping-content-list">
        <!-- 商品 -->
        <div
          class="shopping-content-list-item"
          v-for="(item, index) in shoppingDatas"
          :key="index"
        >
          <!-- check -->
          <img
            class="shopping-content-list-item-check"
            :src="checkImg(item.isCheck)"
            @click="onGoodsCheckClick(item)"
            alt=""
          />
          <!-- 图片 -->
          <img class="shopping-content-list-item-img" :src="item.img" alt="" />

          <!-- 描述 -->
          <div class="shopping-content-list-item-desc">
            <!-- 名称 -->
            <p class="shopping-content-list-item-desc-name text-line-2">
              <!-- 直营 -->
              <direct v-if="item.isDirect"></direct>
              {{ item.name }}
            </p>
            <div class="shopping-content-list-item-desc-data">
              <!-- 价格 -->
              <p class="shopping-content-list-item-desc-data-price">
                ￥{{ item.price | priceValue }}
              </p>
              <!-- 商品数量的控制组件 -->
              <number-manager :defaultNumber="item.number" @onChangeNumber="onNumberChange(arguments, item, index)"></number-manager>
            </div>
          </div>
        </div>
      </div>
      <!-- 统计 -->
      <div class="shopping-content-total">
        <!-- 全选的 check -->
        <div class="shopping-content-total-check" @click="onAllCheckClick">
          <img :src="checkImg(totalData.isAll)" alt="" />
          <p>全选</p>
        </div>

        <!-- 总价格 -->
        <div class="shopping-content-total-price">
          <p class="shopping-content-total-price-total">
            合计: <span>{{ totalData.totalPrice | priceValue }}</span>
          </p>
          <p class="shopping-content-total-price-all">
            总额：
            <span>￥{{ totalData.totalPrice | priceValue }}</span>
            &nbsp;&nbsp; 立减<span>￥0.00</span>
          </p>
        </div>

        <!-- 结算 -->
        <div class="shopping-content-total-commit">
          去结算({{ totalData.goodsNumber }})
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import NavigationBar from '@c/currency/NavigationBar.vue'
import Direct from '@c/goods/Direct.vue'
import NumberManager from '@c/goods/NumberManager.vue'
export default {
  components: {
    NavigationBar,
    Direct,
    NumberManager
  },
  data: function () {
    return {
      shoppingDatas: this.$store.state.shoppingDatas,
      // 总计
      totalData: {
        // 是否全选
        isAll: false,
        // 总价格
        totalPrice: 0,
        // 总数量
        goodsNumber: 0
      }
    }
  },
  methods: {
    /**
     * @param $arguments Js中提供的类数组对象。
     */
    onNumberChange: function ($arguments, item, index) {
      const number = $arguments[0]
      // 修改对应的商品数量
      this.$store.commit('changeShoppingDataNumber', {
        index: index,
        number: number
      })

      // 在商品数量发生变化时， 并且该商品处于选中状态下
      if (item.isCheck) {
        // 统计数据
        this.computeGoodsTotal()
      }
    },

    /**
     * 商品 check 按钮点击事件
     */
    onGoodsCheckClick: function (item) {
      item.isCheck = !item.isCheck

      // 统计数据
      this.computeGoodsTotal()
    },
    /**
     * 全选按钮点击事件
     */
    onAllCheckClick: function () {
      this.totalData.isAll = !this.totalData.isAll

      // 为每个商品设置选中标记 为当前是否为全选标记
      this.shoppingDatas.forEach(item => { item.isCheck = this.totalData.isAll })

      // 统计数据
      this.computeGoodsTotal()
    },
    /**
     * check按钮图标
     */
    checkImg: function (isCheck) {
      return isCheck ? require('@img/check.svg') : require('@img/no-check.svg')
    },
    /**
     * 计总计数据
     */
    computeGoodsTotal: function () {
      // 先初始化 totalData 的数据, 当存在商品没有被选中时，将isAll变为false
      this.totalData = {
        // 是否全选
        isAll: true,
        // 总价格
        totalPrice: 0,
        // 总数量
        goodsNumber: 0
      }
      // 计算总计数据
      /**
       * 遍历数据源，如果有商品处于未选中状态，则把isAll变为false
       * 如果商品处于选中状态， 则计算该商品的总价格和数量
       */
      this.shoppingDatas.forEach(item => {
        // 如果商品处于选中状态， 则计算该商品的总价格和数量
        if (item.isCheck) {
          this.totalData.totalPrice += parseFloat(item.price) * parseInt(item.number)
          this.totalData.goodsNumber += parseInt(item.number)
        } else {
          // 如果有商品处于未选中状态，则把isAll变为fals
          this.totalData.isAll = false
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
@import "@css/style.scss";
.shopping {
  width: 100%;
  height: 100%;
  font-size: 32px;
  overflow: hidden;
  display: flex;
  flex-flow: column;

  &-content {
    background-color: $bgColor;
    border-top: px2rem(1) solid $lineColor;
    height: 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;

    // 商品列表
    &-list {
      height: 100%;
      overflow: hidden;
      overflow-y: auto;

      &-item {
        background-color: white;
        padding: $marginSize;
        display: flex;
        border-bottom: px2rem(1) solid $lineColor;

        &-check {
          width: $checkSize;
          height: $checkSize;
          align-self: center;
          padding: px2rem(6);
        }

        &-img {
          width: $listGoodsImgSize;
          // height: $listGoodsImgSize;
        }

        &-desc {
          width: 100%;
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          padding: 0 $marginSize;

          &-name {
            font-size: $infoSize;
            line-height: px2rem(18);
          }

          &-data {
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-top: $marginSize;

            &-price {
              font-size: $titleSize;
              color: $mainColor;
              font-weight: 500;
            }
          }
        }
      }
    }

    // 总计
    &-total {
      height: px2rem(56);
      box-sizing: border-box;
      display: flex;
      align-items: center;
      background-color: white;
      border-top: px2rem(1) solid $lineColor;

      &-check {
        display: flex;
        align-items: center;
        margin: 0 $marginSize;

        img {
          width: $checkSize;
          height: $checkSize;
          padding: px2rem(6);
        }

        p {
          font-size: $infoSize;
        }
      }

      &-price {
        flex-grow: 2;
        display: flex;
        flex-direction: column;

        &-total {
          font-size: $titleSize;
          margin-bottom: px2rem(6);

          span {
            font-weight: bold;
          }
        }

        &-all {
          font-size: $minInfoSize;
          span {
            font-weight: bold;
          }
        }
      }

      &-commit {
        width: px2rem(120);
        height: 100%;
        font-size: $titleSize;
        background-color: $mainColor;
        color: white;
        display: flex;
        align-items: center;
        justify-content: center;
      }
    }
  }
}
</style>
